<template>
	<view>
		<view class="os_top">
			<view class="os_top_info">配送方式<text>商家配送</text></view>
		</view>
		<view class="os_middle">
			<view class="os_middle_otp">
				<image src="http://cdn.hntgov.net/online/static/os_buy_detail.png"></image>购物清单
			</view>
			<view class="os_line"></view>
			<view class="os_middle_info">
				<image :src="cardModleDetail.goods.mainPic||''" mode="aspectFill"></image>
				<view class="os_middle_right">
					<text style="color: #3D3D3D;font-size: 26rpx;">{{cardModleDetail.goods.name}}</text>
					<text style="color: #AFA9A9;font-size: 24rpx;margin-top: 10rpx;">类型：{{skuInfo.skuName}}</text>
					<view class="os_m_r_price">
						<text style="color: #ED2D38;font-size: 28rpx;">￥{{(skuInfo.buyPrice/100).toFixed(2)}}</text>
						<text style="color: #8C8888;font-size: 28rpx;position: absolute;right: 0rpx;">x{{buyNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="os_botton">
			<view class="os_botton_item">
				<text class="os_b_i_text">商品金额</text>
				<text class="os_b_r_text">￥{{(skuInfo.buyPrice/100).toFixed(2)}}</text>
			</view>
			<view class="os_botton_item" style="margin-top: 30rpx;margin-bottom: 20rpx;" @click="selectCoupon()">
				<text class="os_b_i_text">优惠券</text>
				<view class="os_b_r_text"><text style="color: #f00;">{{couponPrice}}</text><u-icon name="arrow-right"></u-icon></view>
				
			</view>


			<view class="os_line"></view>
			<view style="width: 690rpx;text-align: right;font-size: 24rpx;margin-top: 24rpx;">合计：<text
					style="color: #ED2D38;">￥{{addPayMoney}}</text></view>
		</view>
		<view class="os_sss">
			支付方式
			<text style="position: absolute;right: 30rpx;color: #3D3D3D;font-size: 24rpx;">在线支付</text>
		</view>
		<view style="width: 750rpx;height: 170rpx;"></view>
		<view
			style="position: fixed;bottom: 0rpx;height: 130rpx;display: flex;align-items: center;justify-content: flex-end;background: #FFFFFF;width: 750rpx;">
			<text style="color: #3D3D3D;font-size: 24rpx;">实付：</text>
			<text style="color: #ED2D38;font-size: 32rpx;">￥{{addPayMoney}}</text>
			<view class="os_button" @tap='orderInform()'>提交订单</view>
		</view>
		<u-picker mode="selector" v-model="show1" :range="selector" :default-selector="[0]" @confirm='confirm'>
		</u-picker>
		<u-toast ref="uToast" />
		<u-popup v-model="showPopup" mode="bottom" @close='close'>
			<view style="width: 750rpx;padding:0rpx 30rpx 50rpx 30rpx;">
			<view style="width: 710rpx;height: 80rpx;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 30rpx;">优惠券</view>
              <view v-for="(item,index) in couponList" :key="index" style="display: flex;align-items: center;font-size: 32rpx;position: relative;width: 710rpx;height: 60rpx;">
				  <image src="http://cdn.hntgov.net/online/static/oyouhuiquan.png"  style="width:45rpx;margin-right: 32rpx;height: 30rpx;"></image>
				<view style="margin-right: 20rpx;">{{item.discountType==1?'满减券':'折扣券'}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}</view>
				<view>
					<text  v-if="item.discountType === 1">￥</text>
					<text style="color:#ED2D38;">{{item.discountType === 1? fen2yuan(item.discountPrice): item.discountPercent / 10.0}}</text>
					<text  v-if="item.discountType === 2">折</text>
				</view>
                <view style="position: absolute;right: 0rpx;">
					<u-checkbox v-model="item.isSelect"  shape='circle' @change='changeSelect()'
						active-color="#F82944">
					</u-checkbox>
                </view>
			  </view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				showPopup: false,
				objInfo: {},
				couponPrice: 0,
				selector: [],
				checked1: false,
				show1: false,
				show: false,
				skuInfo: {},
				socre: 0,
				mySocre: 0,
				showSocre: 0,
				isSocre: false,
				isCoumpon: true,
				isshow: false,
				image: '',
				title: '',
				price: '',
				num: '',
				lists: [],
				payMoney: 0,
				addPayMoney: 0,
				priceSum:0,
				discountAdjustmentValue: 0,
				couponsReduce: 0,
				orderId: '',
				flag: false,
				cardModleDetail: '',
				cardModleId: '',
				buyNum: 1,
				skuId: 1,
				goodsId: '',
				couponList:[],
				couponId:0
			}
		},
		onLoad(e) {
			that = this
			uni.setStorageSync('isTo',1)
			this.goodsId = e.goodsId
			this.cardModleDetail = this.$store.state.cardModelInfo
			this.skuInfo = this.$store.state.skuInfo
			this.cardModleId = e.cardModleId
			this.buyNum = e.buyNum
			this.skuId = e.skuId
			this.addPayMoney = ((this.skuInfo.buyPrice * this.buyNum) / 100).toFixed(2)
			this.priceSum=this.addPayMoney
		},
		onShow() {
			if (!uni.getStorageSync('phone')&&uni.getStorageSync('isTo')) {
				uni.navigateTo({
					url: '/pages/index/authorization'
				})
			} else {
				if(uni.getStorageSync('phone')){
					this.getCouponByGoodsIdMethod()
				}
			}

		},
		methods: {
			changeSelect(){
				this.showPopup=false
			},
			close(){
				this.couponList.forEach(item=>{
					if(item.isSelect){
						this.couponId=item.id
						this.couponPrice=(item.discountPrice/100).toFixed(2)
						this.addPayMoney=(this.addPayMoney-this.couponPrice).toFixed(2)
					}
				})
			},
			fen2yuan(price) {
				return (price / 100.0).toFixed(2);
			},
			selectCoupon(){
				this.addPayMoney=this.priceSum
				this.showPopup=true
			},
			getCouponByGoodsIdMethod() {
				this.couponList=[]
				that.$u.api.getCouponByGoodsId({
					mobile: uni.getStorageSync('phone'),
					"channel":'Channel_ZFB',
					goodsId: this.goodsId,
					orderAmount:(this.priceSum*100).toFixed(0)
				}).then(res => {
					if (res) {
						res.data.forEach(item=>{
							if(item.match){
								item.isSelect=false
								this.couponList.push(item)
							}
						})
					}
				})
			},
			orderInform() {
				if(!uni.getStorageSync('phone')){
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
					return
				}
				that.$u.api.postCreateOrderUrl({
					cardModleId: that.cardModleId,
					buyNum: that.buyNum,
					skuId: that.skuInfo.id,
					couponId:that.couponId,
					mobile: uni.getStorageSync('phone')
				}).then(res => {
					if (res) {
						that.$u.api.getPrepayUrl({
							openId: uni.getStorageSync('openId'),
							orderNo: res.data.outTradeNo,
							amount: that.buyNum,
							description: ''
						}).then(result => {
							if (result) {
								uni.requestPayment({
									provider: 'alipay',
									tradeNO: result.data.tradeNo,
									success: function(res1) {
										if (res1.resultCode == '9000') {
											uni.navigateTo({
												url: 'paysuccess?orderId=' + res.data
													.outTradeNo
											})
										}

									},
									fail: function(err) {
										console.log(err);
									}
								})
							}
						})
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>

<style scoped lang="scss">
	.selectcan {
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 13px;
		color: #EE2B2B;
		display: flex;
		align-items: center;
		margin-left: 52rpx;
	}

	.selectcanno {
		position: relative;
		margin-top: 50rpx;
		font-size: 13px;
		color: #999;
		display: flex;
		align-items: center;
		margin-left: 52rpx;
	}

	.os_line {
		width: 690rpx;
		margin-top: 28rpx;
		height: 1rpx;
		background-color: #E7E6E6;
	}

	.os_top {
		width: 750rpx;
		padding: 30rpx;
		background-color: #fff;

		.os_top_info {
			color: #8C8888;
			display: flex;
			align-items: center;
			font-size: 26rpx;
		}

		.os_top_info text {
			color: #3D3D3D;
			position: absolute;
			right: 30rpx;
		}

		.os_top_address {
			display: flex;

			align-items: center;
			width: 690rpx;
			margin-top: 20rpx;

		}

		.os_top_address image {
			width: 28rpx;
			height: 34rpx;
		}

		.os_top_address text {
			width: 620rpx;
			color: #3D3D3D;
			font-size: 28rpx;
		}
	}

	.os_middle {
		background-color: #ffffff;
		width: 750rpx;
		padding: 30rpx;
		margin-top: 20rpx;

		.os_middle_otp {
			display: flex;
			align-items: center;
			color: #3D3D3D;
			font-size: 28rpx;
		}

		.os_middle_otp image {
			width: 28rpx;
			height: 32rpx;
			margin-right: 30rpx;
		}

		.os_middle_info {
			margin-top: 28rpx;
			display: flex;

			.os_middle_right {
				width: 502rpx;
				margin-left: 28rpx;
				display: flex;
				flex-direction: column;

				.os_m_r_price {
					width: 502rpx;
					position: relative;
					margin-top: 10rpx;
				}
			}
		}

		.os_middle_info image {
			width: 144rpx;
			height: 144rpx;
			border-radius: 8rpx;
		}
	}

	.os_ly {
		color: #817A7A;
		font-size: 26rpx;
		display: flex;
		align-items: center;

		margin-top: 24rpx;
	}

	.os_ly input {
		position: absolute;
		right: 30rpx;
		text-align: right;

	}

	.os_botton {
		padding: 30rpx;
		width: 750rpx;
		background-color: #FFFFff;
		margin-top: 20rpx;

		.os_botton_item {
			font-size: 26rpx;
			display: flex;
			align-items: center;
			position: relative;

			.os_b_i_text {
				color: #817A7A;
			}

			.os_b_r_text {
				color: #3D3D3D;
				position: absolute;
				right: 0rpx;
				display: flex;
				align-items: center;
			}

			.os_b_r_text1 {
				color: #FF0000;
				position: absolute;
				right: 0rpx;
			}

			.os_b_r_text2 {
				color: #B8B3B3;
				position: absolute;
				right: 0rpx;
			}
		}
	}

	.os_sss {
		width: 750rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx 0rpx 30rpx;
		color: #817A7A;
		font-size: 26rpx;
		background-color: #fff;
		margin-top: 20rpx;


	}

	.os_button {
		width: 192rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 28rpx;
		background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
		border-radius: 8rpx;
		margin-right: 14rpx;
		margin-left: 54rpx;
	}
</style>